<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
    <head>
        <!--<th:block th:include="include :: head('table-class')" />-->
        <link th:href="@{/static/css/main.css}" rel="stylesheet"/>
        <!--<link th:href="@{/webjars/font-awesome/css/font-awesome.min.css}" rel="stylesheet"/>-->
        <!--        <link th:href="@{/webjars/fullpage/jquery.fullPage.css}" rel="stylesheet"/>
                <link th:href="@{/webjars/waves/dist/waves.min.css}" rel="stylesheet"/>-->
        <link th:href="@{/webjars/bootstrap-table/dist/bootstrap-table.min.css}" rel="stylesheet"/>
        <!--        <link th:href="@{/webjars/x-editable-bootstrap/css/bootstrap-editable.css}" rel="stylesheet"/>
                <link th:href="@{/webjars/jquery-treegrid/css/jquery.treegrid.css}" rel="stylesheet"/>
                <link th:href="@{/webjars/zTree/css/metroStyle/metroStyle.css}" rel="stylesheet"/>-->
    </head>
    <body>
        <body>
            <div class="toolbar">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" checked disabled>
                            <code>table</code>
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" checked>
                            <code>table-bordered</code>
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" checked>
                            <code>table-hover</code>
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">
                            <code>table-striped</code>
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">
                            <code>table-dark</code>
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">
                            <code>table-sm</code>
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">
                            <code>table-borderless</code>
                    </label>
                </div>
            </div>

            <table
                id="table"
                data-url="/static/json/data1.json">
                <thead>
                    <tr>
                        <th data-field="id">Item ID</th>
                        <th data-field="name">Item Name</th>
                        <th data-field="price">Item Price</th>
                    </tr>
                </thead>
            </table>
            <!--<div th:replace="include :: footer"></div>-->
            <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
            <script th:src="@{/webjars/popper.js/dist/umd/popper.min.js}"></script>
            <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

<!--            <script th:src="@{/static/plugins/BootstrapMenu.min.js}"></script>
            <script th:src="@{/static/plugins/jquery.jdirk.min.js}"></script>
            <script th:src="@{/webjars/pace/pace.min.js}"></script>

            <script th:src="@{/webjars/waves/dist/waves.min.js}"></script>
            <script th:src="@{/webjars/fullpage/jquery.fullPage.min.js}"></script>
            <script th:src="@{/webjars/jquery-cookie/jquery.cookie.js}"></script>
            <script th:src="@{/webjars/select2/js/select2.min.js}"></script>-->

            <script th:src="@{/webjars/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<!--            <script th:src="@{/webjars/bootstrap-table/dist/extensions/toolbar/bootstrap-table-toolbar.min.js}"></script>
            <script th:src="@{/webjars/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js}"></script>
            <script th:src="@{/webjars/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js}"></script>
            <script th:src="@{/webjars/bootstrap-table/dist/extensions/treegrid/bootstrap-table-treegrid.min.js}"></script>
            <script th:src="@{/webjars/x-editable-bootstrap/js/bootstrap-editable.js}"></script>
            <script th:src="@{/webjars/jquery-treegrid/js/jquery.treegrid.min.js}"></script>
            <script th:src="@{/webjars/layer/dist/layer.js}"></script>
            <script th:src="@{/webjars/layui/layui.js}"></script>-->
<!--            <script th:src="@{/webjars/jquery-validation/jquery.validate.min.js}"></script>
            <script th:src="@{/webjars/jquery-validation/additional-methods.min.js}"></script>
            <script th:src="@{/webjars/zTree/js/jquery.ztree.all.min.js}"></script>
            <script th:src="@{/webjars/zTree/js/jquery.ztree.exhide.min.js}"></script>-->
            <!-- Page specific javascripts-->
            <script>
                var $table = $('#table')

                $table.bootstrapTable()

                $('.toolbar input').change(function () {
                    var classes = []
                    $('.toolbar input:checked').map(function () {
                        classes.push($(this).next().text())
                    })

                    $table.bootstrapTable('refreshOptions', {
                        classes: classes.join(' ')
                    })
                })
            </script>
        </body>
</html>